<script>
import { mapGetters,mapActions } from 'vuex';
export default {
  name: 'ProList',
  computed: {
    ...mapGetters(['productList'])
  },
  mounted() {
    console.log(this.productList)
  },
  methods: {
    ...mapActions(['addToCart']),
    addToCarts (shop) {
      console.log(1);
      this.addToCart(shop)
    }
  }
}
</script>

<template>
  <div>
    <h4>商品列表</h4>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>名称</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(shop) in productList" :key="shop.id">
          <td>{{ shop.id }}</td>
          <td>{{ shop.name }}</td>
          <td>{{ shop.price }}</td>
          <td>
            <div @click="addToCarts(shop)">购物车</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>

</style>
